<template>
	<view class="content">
		 <view class="status_bar">   
		        </view>
		<image class="loginTop" src="https://zzzsep.oss-cn-beijing.aliyuncs.com/2024/03/18/6920adfa2bf44a89a5fea44b7035f373cup.png"  mode="aspectFill" ></image>

		<image class="page-head" src="https://zzzsep.oss-cn-beijing.aliyuncs.com/2024/04/01/68f7f04869d149ccb8cad93f262d86fflogo.png" mode="heightFix"></image>

		<view class="page-main">
			<view class="form">
				<u--form 
					class="form"
					labelPosition="left"
					:model="formData"
					:rules="rules"
					ref="uForm">
					<u-form-item label="手机号码"   prop="phone" :labelWidth="130" borderBottom>
						<u--input v-model="formData.phone" placeholder="请输入手机号码" border="none"/>
					</u-form-item>
					<u-form-item label="验证码" class="formfont" prop="code" :labelWidth="130" borderBottom>
						<u--input  v-model="formData.code" placeholder="请输入验证码" border="none"/>
						<u-button slot="right" size="mini"  type="primary" shape="circle"
						color="gray"
						plain
						:customStyle="{
							
							color: 'black'
						}" @click="getCode">{{tips}}</u-button>
						<u-verification-code :seconds="60" @end="end" @start="start" ref="uCode" @change="codeChange">
						</u-verification-code>
					</u-form-item>
				</u--form>
			</view>
			<view class="btn-group">
					<u-button
						type="primary"
						color="linear-gradient(to right, #3f94f7, #3f94f7)"
						:customStyle="{
							fontSize: '36rpx'
						}"
						@click="submitForm"
					>
						登录
					</u-button>
				
			</view>
		
			<view class="foot">
				<text>还没有账号？</text>
				<text style="color: #3f94f7;" @click="toRegister">注册</text>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: "验证码",
				formData: {
					phone: null,
					code: null
				},
				rules: {
					phone: [
						{ required: true, message: '请输入手机号码', trigger: ['blur', 'change'] },
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
								return reg.test(value);
							},
							message: '输入的手机号码格式错误',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					code: [
						{ required: true, message: '请输入验证码', trigger: ['blur', 'change'] },
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								let reg = /^[0-9]{6}/;
								return reg.test(value);
							},
							message: '请输入六位验证码',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
				}
				
			};
		},
		methods: {
			codeChange(text) {
					this.tips = text;
				},
				toRegister () {
					uni.navigateTo({
						url: '/pages/login/register'
					})
				},
				getCode() {
					let phoneCodeVerification = /^[1][3-9][0-9]{9}$/;
					if (this.formData.phone == '') {
						this.$u.toast('请输入手机号');
					
					} else {
				
						if (this.$refs.uCode.canGetCode) {
							uni.showLoading({
								title: '正在获取验证码'
							})
							//模拟发送
							this.$H.post("user/sendMsg", {
								phone: this.formData.phone
							}).then(res => {
								if (res.code == 200) {
									this.$refs.uCode.start();
								}
								this.$u.toast(res.msg);
								uni.hideLoading();
							})
						} else {
							this.$u.toast('倒计时结束后再发送');
						}
					}
				},
				end() {},
				start() {},
				submitForm(){
					uni.showLoading({
						mask: true,
						title: '登录中'
					});
					const params = {
						...this.formData,
					}
					login(params).then(res=>{
						uni.showToast({
							title: "登录成功",
							icon: 'none'
						})
						let that=this
						uni.setStorageSync("hasLogin", true);
						
						uni.setStorageSync('userInfo', res.data)
						this.$H.post("user/smsLogin", this.formData).then(r => {
							if (res.code == 200) {
								
								uni.setStorageSync("token", r.token);
								
							}
							})
						
						uni.switchTab({
							url: '/pages/partner/index'
						})
					}).finally(() =>{
						uni.hideLoading();
					})
								
				}
			
		}
	}
</script>

<style lang="scss">
.status_bar {
	        height: var(--status-bar-height);
	        width: 100%;
	    }
	.content {
		background-color: #FFFFFF;
		height: 100vh;
		padding-bottom: 0;
	}
	.loginTop{
	width: 100%;
	  vertical-align: bottom;	
	}
	.page-head {
		
		display: block;
		margin: 0 auto;
		vertical-align: bottom;
		height: 200rpx;
		padding-top: 0rpx;
		
		// display: flex;
		// justify-content: center;
		// align-items: center;
		// font-size: 45rpx;
		// color: #fff;
	}
	.page-main {
		width: 92%;
		margin: 0 auto;
		margin-top: 0rpx;
		background-color: transparent;
	}
	.title {
		
		text-align: center;
	}
	.formfont{
		
	}
	.form {
		font-size: 30rpx;
		width: 88%;
		margin: 0 auto;
		padding-top: 25rpx;
		padding-bottom: 0;
	}
	.btn-group {
		width: 85%;
		margin: 50rpx auto;
		margin-bottom: 20rpx;
	}
	.foot {
		margin: 0 55rpx;
		margin-top: 50rpx;
		margin-bottom: 0rpx;
		font-size: 35rpx;

	}
</style>
